<template>
  <el-dialog title="试题预览" :visible.sync="dialogVisible" width="800px">
    <div v-if="dialogVisible">
      <p>试题信息</p>
      <el-descriptions border :column="1">
        <el-descriptions-item label="试题类型">
          <p style="width: 650px">{{ typeFilter(row.testSubjects.type) }}</p>
        </el-descriptions-item>
        <el-descriptions-item label="试题难度">
          {{ difficultyFilter(row.testSubjects.difficulty) }}
        </el-descriptions-item>

        <el-descriptions-item label="试题题干">
          <p style="max-width: 660px" v-html="row.testSubjects.title"></p>
        </el-descriptions-item>
        <el-descriptions-item
          label="选项设置"
          v-if="row.testSubjects.type == 1 || row.testSubjects.type == 2"
        >
          <ul class="select-option">
            <li
              v-for="(v, i) in JSON.parse(row.testSubjects.subOptions)"
              :key="i"
            >
              <span>{{ v.tag }}</span>
              <p class="sheng" v-html="v.contents"></p>
            </li>
          </ul>
        </el-descriptions-item>
        <el-descriptions-item
          label="试题答案"
          v-if="row.testSubjects.type != 4"
        >
          <p style="max-width: 660px">{{ showAnswer }}</p>
        </el-descriptions-item>
        <el-descriptions-item
          label="试题答案"
          v-if="row.testSubjects.type == 4"
        >
          <ul class="select-option blank-area">
            <li
              v-for="(v, i) in JSON.parse(row.testSubjects.subAnswer)"
              :key="i"
            >
              <span>{{ '空格' + v.key }}</span>
              <p class="sheng">{{ v.value }}</p>
            </li>
          </ul>
        </el-descriptions-item>
        <el-descriptions-item label="答案解析">
          <p style="width: 650px">
            <span v-html="row.testSubjects.subAnalysis"></span>
          </p>
        </el-descriptions-item>
      </el-descriptions>
      <p style="margin-top: 15px">收藏信息</p>
      <el-descriptions border :column="1">
        <el-descriptions-item label="我的答案">
          <p style="width: 650px">{{ row.myAnswer || '未作答' }}</p>
        </el-descriptions-item>
        <el-descriptions-item label="收藏时间">
          <p>{{ row.createTime }}</p>
        </el-descriptions-item>
        <el-descriptions-item label="我的备注">
          <p>{{ row.des || '--' }}</p>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import questionMixin from '@/views/Admin/exam/public/questionMixin'
export default {
  mixins: [questionMixin],
  data() {
    return {
      dialogVisible: false,
      row: {},
    }
  },
  computed: {
    showAnswer() {
      let answer = this.row.testSubjects.subAnswer
      if (this.row.type == 2) {
        answer = JSON.parse(answer).join('，')
      } else if (this.row.testSubjects.type == 3) {
        answer = answer == 1 ? '正确' : '错误'
      }
      return answer
    },
  },
  mounted() {
    this.$bus.$on('showDialogTestError', (row) => {
      this.row = row
      this.dialogVisible = true
    })
  },
  beforeDestroy() {
    this.$bus.$off('showDialogTestError')
  },
}
</script>
<style scoped lang="scss">
.select-option {
  border: 1px solid #eee;
  border-bottom: 0 none;
  li {
    border-bottom: 1px solid #eee;
    height: 32px;
    line-height: 32px;
    span {
      float: left;
      width: 60px;
      text-align: center;
      background-color: #f5f5f5;
    }
    p {
      float: left;
      padding: 0 10px;
      box-sizing: border-box;
      width: 590px;
    }
  }
}
.blank-area {
  li {
    span {
      width: 120px;
    }
    p {
      width: 530px;
    }
  }
}
.select-option .sheng {
  ::v-deep p {
    display: inline !important;
  }
}
</style>